<template>
	<text
		v-if="label"
		class="uni-tag"
		:style="[styles]"
		:class="[classes, _class]"
		@click.stop="_onClick($event)"
		@longpress="_onLongpress($event)"
		>{{ label }}</text
	>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue';
import { computedColor } from '../../utils/minxs/props';

const props = defineProps({
	type: {
		// 标签类型default、primary、success、warning、error、royal
		type: String,
		default: 'default',
	},
	size: {
		// 标签大小 large,normal, small,mini
		type: String,
		default: 'default',
	},
	// 标签内容
	label: {
		type: String,
		default: '',
	},
	disabled: {
		// 是否为禁用状态
		type: [Boolean, String],
		default: false,
	},
	inverted: {
		// 是否为空心
		type: [Boolean, String],
		default: false,
	},
	circle: {
		// 是否为圆角样式
		type: [Boolean, String],
		default: false,
	},
	mark: {
		// 是否为标记样式
		type: [Boolean, String],
		default: false,
	},
	customStyle: {
		type: String,
		default: '',
	},
	color: {
		type: String,
		default: 'blue-500',
	},
	fontColor: {
		type: String,
		default: 'gray-50',
	},
	linear: {
		type: Boolean,
		default: false,
	},
	rounded: {
		type: Number,
	},
	_class: {
		type: [String, Array],
	},
	_style: {
		type: String,
	},
	checked: {
		type: [Boolean],
		default: false,
	},
});
const emits = defineEmits(['click', 'close', 'change', 'longpress', 'update:checked']);
const _checked_ = ref(false);

const classes = computed(() => {
	const { type, disabled, inverted, circle, mark, size } = props;
	const classArr = [
		'uni-tag--' + type,
		'uni-tag--' + size,
		isTrue(disabled) ? 'uni-tag--disabled' : '',
		isTrue(inverted) ? 'uni-tag--' + type + '--inverted' : '',
		isTrue(circle) ? 'uni-tag--circle' : '',
		isTrue(mark) ? 'uni-tag--mark' : '',
		// type === 'default' ? 'uni-tag--default' : 'uni-tag-text',
		isTrue(inverted) ? 'uni-tag--inverted uni-tag-text--' + type : '',
		size === 'small' ? 'uni-tag-text--small' : '',
	];
	// 返回类的字符串，兼容字节小程序
	return classArr.join(' ');
});

const styles = computed(() => {
	let style = {} as any;
	let color = computedColor(props.color);
	let fontColor = computedColor(props.fontColor);
	if (props.inverted) {
		style['color'] = color;
		style['border-width'] = '1rpx';
		style['border-color'] = color;
	} else {
		style['color'] = fontColor;
		style['background-color'] = color;
	}
	if (props.rounded) {
		style['border-radius'] = props.rounded + 'rpx';
	}

	// style['border-radius'] = '12px';
	// if (props.color && props.inverted) {
	// 	let color = computedColor(props.color)
	// 	style['background-color'] = color;
	// 	style['border-color'] = 'transparent';
	// }
	// if (props.color && props.inverted) {
	// 	let color = computedColor(props.color, '', props.theme)
	// 	style['color'] = color;
	// }
	// if (props.bg && props.linear) {
	// 	style['background-image'] = computedColor(props.bg, props.linear ? 'linear' : '', props.theme);
	// 	style['border-color'] = 'transparent';
	// }
	return style;
});

const checked_com = computed({
	get: function () {
		return _checked_.value;
	},
	set: function (val: boolean) {
		_checked_.value = val;
		emits('update:checked', _checked_.value);
	},
});

checked_com.value = props.checked;

watch(
	() => props.checked,
	(newval) => {
		checked_com.value = newval;
		emits('change', checked_com.value);
	}
);

function isTrue(value) {
	return value === true || value === 'true';
}

function _onClick(event: Event) {
	emits('click', event);
}

function _onLongpress(event: Event) {
	emits('longpress', event);
}
</script>

<style lang="scss" scoped>
$uni-primary: #2979ff !default;
$uni-success: #18bc37 !default;
$uni-warning: #f3a73f !default;
$uni-error: #e43d33 !default;
$uni-info: #8f939c !default;

$tag-large-pd: 8px 12px;
$tag-default-pd: 6px 12px;
$tag-small-pd: 2px 5px;
$tag-mini-pd: 1px 3px;

.uni-tag {
	line-height: 14px;
	font-size: 12px;
	font-weight: 200;
	padding: $tag-default-pd;
	color: #fff;
	border-radius: 3px;
	background-color: $uni-info;
	white-space: inherit;
	// border-width: 1rpx;
	// border-style: solid;
	// border-color: $uni-info;
	/* #ifdef H5 */
	cursor: pointer;
	/* #endif */

	// size attr
	&--large {
		padding: $tag-large-pd;
		font-size: 16px !important;
	}

	&--default {
		font-size: 12px;
	}

	&--default--inverted {
		color: $uni-info;
		border-color: $uni-info;
	}

	&--small {
		padding: $tag-small-pd;
		font-size: 12px;
		border-radius: 2px;
	}

	&--mini {
		padding: $tag-mini-pd;
		font-size: 12px;
		border-radius: 2px;
	}

	// type attr
	&--primary {
		background-color: $uni-primary;
		border-color: $uni-primary;
		color: #fff;
	}

	&--success {
		color: #fff;
		background-color: $uni-success;
		border-color: $uni-success;
	}

	&--warning {
		color: #fff;
		background-color: $uni-warning;
		border-color: $uni-warning;
	}

	&--error {
		color: #fff;
		background-color: $uni-error;
		border-color: $uni-error;
	}

	&--primary--inverted {
		color: $uni-primary;
		border-color: $uni-primary;
	}

	&--success--inverted {
		color: $uni-success;
		border-color: $uni-success;
	}

	&--warning--inverted {
		color: $uni-warning;
		border-color: $uni-warning;
	}

	&--error--inverted {
		color: $uni-error;
		border-color: $uni-error;
	}

	&--inverted {
		background-color: #fff;
	}

	// other attr
	&--circle {
		border-radius: 15px !important;
	}

	&--mark {
		border-top-left-radius: 0 !important;
		border-bottom-left-radius: 0 !important;
		border-top-right-radius: 15px !important;
		border-bottom-right-radius: 15px !important;
	}

	&--disabled {
		opacity: 0.5;
		/* #ifdef H5 */
		cursor: not-allowed;
		/* #endif */
	}
}

.uni-tag-text {
	color: #fff;
	font-size: 14px;

	&--primary {
		color: $uni-primary;
	}

	&--success {
		color: $uni-success;
	}

	&--warning {
		color: $uni-warning;
	}

	&--error {
		color: $uni-error;
	}

	&--small {
		font-size: 12px;
	}
}
</style>
